<template>
  <div class="detail">
     <el-breadcrumb separator-class="el-icon-arrow-right" style="height:30px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="`/info/enterprise/1/`">{{className[$route.params.type].cname}}</el-breadcrumb-item>
           <el-breadcrumb-item v-if="detail.data_info">{{detail.data_info.article_type[1]}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="body-wrap" :gutter = "100">
      <el-col :span="16" :xs = "24">
        <div class="body" v-if="detail">
          <div class="title">
            <p>{{detail.data_info.title}}</p>
            <span class=title-sp>发布时间:&nbsp;&nbsp;<time>{{detail.data_info.add_time}}</time></span>
          </div>
          <div class="article" v-html="detail.data_info.info"></div>
          <div class="share hidden-xs-only">
            <p>分享到:&nbsp;&nbsp;</p>
            <img @click="showcode = true" src="@/assets/img/wechat.png" style="cursor: pointer">
          </div>
          <div class="button">
            <router-link :to="`/infoMore/${$route.params.type}/${detail.pre.id}`" class="button-left">
              <i class="el-icon-arrow-left go-nav"></i>
              <div class="nav-item">
                <p>上一篇</p>
                <p class="nav-title">{{detail.pre.title}}</p>
                </div>
            </router-link>
            <router-link :to="`/infoMore/${$route.params.type}/${detail.next.id}`" class="button-right">
              <div class="nav-item">
                <p>下一篇</p>
                <p class="nav-title">{{detail.next.title}}</p>
              </div>
              <i class="el-icon-arrow-right go-nav"></i>
            </router-link>
          </div>
        </div>
      </el-col>
      <el-col :span="8" :xs = "24">
        <div class="links" v-if="detail.data_list">
          <router-link class="links-1" v-for="item in detail.data_list" :key = "item.id" :to="`/infoMore/${$route.params.type}/${item.id}`">
            <h4>{{item.title}}</h4>
            <p>发布日期：{{item.add_time}}</p>
          </router-link>
        </div>
      </el-col>
    </el-row>

    <div class="show-code" v-show="showcode">
      <img width="50px" style=" position: absolute;top: 70px; right: 70px; cursor: pointer;"  @click="showcode = false" src="../assets/img/close.png" alt="">
      <div>
        <p style="font-size: 22px; font-weight: 500; line-height: 40px">微信扫码分享</p>
        <vue-qr :text="shareUrl" :size="300"></vue-qr>        
      </div>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  data() {
    return {
      detail: '',
      newsList: '',
      showcode: false,
      shareUrl: window.location.href,
      className: {
        journalism: {
          name: 'NEWS',
          cname: '新闻中心'
        },
         laborunion: {
          name: 'ACTIVITIES',
          cname: '党务动态'
        },
        enterprise: {
          cname: '企业文化'
        }
      },
    }
  },

  created() {
    this.$request({url: `/enterprisetype23/${this.$route.params.id}/`}).then(result => {
      const {data} = result;
      this.detail =data;
    })
  },
  watch: {
    $route() {
      this.$request({url: `/enterprisetype23/${this.$route.params.id}/`}).then(result => {
      const {data} = result;
      this.detail =data;
    })
    }
  },
  components: {
    VueQr
  }
}
</script>


<style lang="stylus">
iframe
  display inline-block
  margin 0 auto
.detail
  max-width 1160px
  width 100%
  margin 0 auto
  margin-top 100px
  padding 0 20px
  box-sizing border-box
  .body-wrap
    margin 40px 0


  .article
    display block
    text-align: justify;
    min-height 400px
    line-height 25px
    font-size 15px
    
    p
      text-align justify
      margin 10px
    
    img
      width 100% !important
      height auto !important

  .title
    text-align center
    margin 0px
    p
      font-size 25px
      font-weight 500
    &-sp 
      display inline-block
      margin 10px 0
      font-size 14px

  .share
    width 100%
    margin 20px 0px 0px 0px
    p
      display inline-block
      font-size 17px
    img
      margin-bottom -5px
      display inline-block
      width 25px

  .button
    margin 50px 0
    display flex
    justify-content space-between
    .button-left, .button-right
      text-decoration none
      max-width 50%
      display inline-flex
      cursor pointer
      &:hover
        color #d3202a
    .go-nav
      width 40px
      height 45px
      font-size 45px
    .nav-item 
      display inline-block
      p
        width 100%
        padding 0 5px
        height 20px
        text-overflow ellipsis
        box-sizing border-box
        overflow hidden
        display inline-block
        &.nav-title
          font-size 13px
    .button-right p
      text-align right 


  .links 
    margin-top 30px
    h4
      font-size 15px
      line-height 25px
      height 25px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    p
      font-size 10px
      line-height 22px
    &-1
      display block
      padding 20px 5px
      box-sizing border-box
      border-bottom 1px #989898 solid
      &:hover
        text-decoration none
        h4
          color #d3202a
  .show-code
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index 999
    background-color rgba(158, 158, 158, 0.8);
    display flex
    flex-direction column
    justify-content center

@media (max-width 765px)  
  .detail
    margin-top 0
    .body-wrap
      margin 0 !important
      .el-col
        padding 0 !important
    .title
      p
       font-size 17px
       line-height 30px
    .article
      p
        font-size 13px



</style>
